<template>
    <div class="fillcontain">
        <!-- <head-top></head-top> -->
        <div class="table_container" >
            <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="查询条件" name="1">

                <el-row :gutter="20">
                    <el-col :span="20">
                        <div class="demo-input-suffix" >
                            <el-input
                                placeholder="请输入商标编码"
                                prefix-icon="el-icon-search"
                                v-model="code">
                            </el-input>  
                            <el-input
                                placeholder="请输入商标名称"
                                prefix-icon="el-icon-search"
                                v-model="name">
                            </el-input>                              
                            <el-select v-model="jb" clearable placeholder="请选择级别">
                                <el-option
                                v-for="item in jblist"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>        
                        </div>
                    </el-col>
                    <el-col :span="4" >
                        <div style="text-align:right">
                        <el-button type="primary" icon="el-icon-search" :loading="searchLoading" @click="doSearch()" >查询</el-button>
                        </div>
                    </el-col>
                </el-row>    
            </el-collapse-item>
            </el-collapse>
        </div>
        <div class="table_container" >

            <el-row :gutter="10">
                <el-col :span="20">
                    <div class="demo-input-suffix" >
                               
                    </div>
                </el-col>
                <el-col :span="4" >
                    <div style="text-align:right">
                    <el-button round type="primary" icon="el-icon-plus" size="mini" @click="doAdd()" >添加</el-button>
                    </div>
                </el-col>
            </el-row>    
            
        </div>        
        <div class="table_container">
            <el-table
                :data="tableData"
                style="width: 100%" stripe>
                <el-table-column type="expand">
                  <template scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="商标 ID">
                        <span>{{ props.row.id }}</span>
                      </el-form-item>
                      <el-form-item label="商标编码">
                        <span>{{ props.row.code }}</span>
                      </el-form-item>                      
                      <el-form-item label="商标名称">
                        <span>{{ props.row.name }}</span>
                      </el-form-item>
                      <el-form-item label="注册地">
                        <span>{{ props.row.zcdd }}</span>
                      </el-form-item>
                      <el-form-item label="注册证书">
                        <span>{{ props.row.zczs }}</span>
                      </el-form-item>
                      <el-form-item label="证书有效期">
                         <span>{{ props.row.zsyxq }}</span>
                      </el-form-item>
                      <el-form-item label="所有者">
                        <span>{{ props.row.syz }}</span>
                      </el-form-item> 
                      <el-form-item label="代理情况">
                        <span>{{ props.row.dlqk }}</span>
                      </el-form-item>  
                      <el-form-item label="级别">
                        <span>{{ props.row.jbname }}</span>
                      </el-form-item> 
                      <el-form-item label="商标地域">
                        <span>{{ props.row.sbdyname }}</span>
                      </el-form-item>  
                      <el-form-item label="状态">
                        <span>{{ props.row.sbztname }}</span>
                      </el-form-item>                                                                                                            
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="商标 ID"  prop="id"></el-table-column>
                <el-table-column  label="商标编码" prop="code"></el-table-column>
                <el-table-column label="商标名称" prop="name"></el-table-column>
                <el-table-column  label="注册地点" prop="zcdd"></el-table-column>
                <el-table-column label="注册证书" prop="zczs"></el-table-column>                
                <el-table-column label="级别" prop="jb" :formatter="getJbName"></el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="scope">
                        <el-dropdown >
                        <span class="el-dropdown-link">
                             <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit" @click.native="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item command="del" divided  @click.native="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>
                   </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="20"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div>
            <el-dialog title="修改商品商标" v-model="dialogFormVisible" :visible.sync="dialogFormVisible">
                <el-form :model="selectTable" :rules="rules" ref="editForm">
                    <el-form-item label="商标编码" label-width="100px" prop="code">
                        <el-input v-model="selectTable.code" auto-complete="off" disabled ></el-input>
                    </el-form-item>
                    <el-form-item label="商标名称" label-width="100px" prop="name">
                        <el-input v-model="selectTable.name" auto-complete="off" placeholder="必填项" ></el-input>
                    </el-form-item>                    
                    <el-form-item label="注册地点" label-width="100px">
                        <el-input v-model="selectTable.zcdd" auto-complete="off"></el-input>
                    </el-form-item>   
                    <el-form-item label="注册证书" label-width="100px">
                        <el-input v-model="selectTable.zczs" auto-complete="off"></el-input>
                    </el-form-item>                                      
                     <el-form-item label="证书有效期" label-width="100px">
                        <el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd'
                            v-model="selectTable.zsyxq"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>   
                     <el-form-item label="所有者" label-width="100px">
                        <el-input v-model="selectTable.syz" auto-complete="off"></el-input>
                    </el-form-item>   
                    <el-form-item label="代理情况" label-width="100px">
                        <el-input v-model="selectTable.dlqk" auto-complete="off"></el-input>
                    </el-form-item>                       
                    <el-form-item label="级别" label-width="100px">
                        <el-select v-model="selectTable.jb">
                            <el-option
                            v-for="item in jblist"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>                    
                    </el-form-item> 
                    <el-form-item label="商标地域" label-width="100px">
                        <el-select v-model="selectTable.sbdy">
                            <el-option
                            v-for="item in sbdylist"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>                    
                    </el-form-item> 
                    <el-form-item label="商标状态" label-width="100px">
                        <el-select v-model="selectTable.sbzt">
                            <el-option
                            v-for="item in sbztlist"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>                    
                    </el-form-item>                                         
                </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="doSaveSpsb()">确 定</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {baseUrl, baseImgPath} from '@/config/env'
    import { getSpsbLists,saveSpsb,deleteSpsb} from '@/api/getData'
    export default {
        data(){
            return {
                baseUrl,
                baseImgPath,
                searchLoading:false,
                activeNames: ['1'],
                jb:'',
                jblist:[{
                    value: '0',
                    label: 'A级'
                    }, {
                    value: '1',
                    label: '准A级'
                    }, {
                    value: '2',
                    label: 'B级'  
                    }, {
                    value: '3',
                    label: 'C级'  
                    }, {
                    value: '4',
                    label: '民用级'  
                    }
                ],
                sbdylist:[{
                    value: '0',
                    label: '国内'
                    }, {
                    value: '1',
                    label: '国外'
                    }
                ],    
                sbztlist:[{
                    value: '0',
                    label: '已注册'
                    }, {
                    value: '1',
                    label: '受理期间'
                    }, {
                    value: '2',
                    label: '未注册'  
                    }
                ],                            
                rules : {
                    name : [
                        { required: true, message: '请输入商标名称', trigger: 'blur' }
                    ]
                },                
                curId:null,
                selectIndex: null,
                city: {},
                offset: 0,
                limit: 20,
                count: 0,
                tableData: [],
                tableDataItem: [],
                currentPage: 1,
                selectTable: {},
                dialogFormVisible: false,
                categoryOptions: [],
                selectedCategory: [],
                address: {},
                name:'',
                code :''
            }
        },
        created(){
            this.initData();
        },
    	components: {
    		headTop,
    	},
        methods: {
            async initData(){
                try{
                    this.doGetSpsbLists();
                }catch(err){
                    console.log('获取数据失败', err);
                }
            },
            
            async doGetSpsbLists(){
                const {latitude, longitude} = this.city;
                var _this = this
                var data = {
                    page:_this.currentPage,
                    rows:_this.limit,
                    name:_this.name,
                    code:_this.code,
                    jb:_this.jb
                }
                const rules = await getSpsbLists(data);
                this.tableData = [];
                _this.count = rules.total
                rules.rows.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.code = item.code;
                    tableData.name = item.name;
                    tableData.zcdd = item.zcdd;
                    tableData.zczs = item.zczs;
                    tableData.zsyxq = item.zsyxq;
                    tableData.syz = item.syz;
                    tableData.dlqk = item.dlqk;
                    tableData.jb = item.jb.toString();
                    tableData.sbdy = item.sbdy.toString();
                    tableData.sbzt = item.sbzt.toString();
                    tableData.jbname= this.jblist[item.jb].label
                    tableData.sbdyname= this.sbdylist[item.sbdy].label
                    tableData.sbztname= this.sbztlist[item.sbzt].label
                    this.tableData.push(tableData);
                })
            },
                        
            getJbName(row, column, cellValue){
                console.log('row.jb',row.jb)  
               // console.log(this.jblist[val])  
                return this.jblist[row.jb].label
            },
            
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.doGetSpsbLists()
            },
            handleEdit(index, row) {
                console.log('handleEdit:',row)
              //  this.curId = row.id;
                this.selectTable = row;
              //  this.selectTable.status =  row.status.toString();
              //  this.address.address = row.address;
                this.dialogFormVisible = true;
            },
            doAdd() {
                this.selectTable ={jb:'0',sbzt:'0',sbdy:'0'}
                this.dialogFormVisible = true;
            },            
            async handleDelete(index, row) {
                var _this = this
               _this.doDeleteSpsb(row.id,index)
            },           
                    
            doSearch(){
                this.currentPage=1;
                this.searchLoading=true;
                this.doGetSpsbLists();
                this.searchLoading=false;
            },    
            handleCommand(command,row) {
                //this.$message('click on item ' + command);
                console.log('row:',row)
                this.selectTable = row;
              //  this.address.address = row.address;
                this.dialogFormVisible = true;
            },        
            handleServiceAvatarScucess(res, file) {
                if (res.status == 1) {
                    this.selectTable.image_path = res.image_path;
                }else{
                    this.$message.error('上传图片失败！');
                }
            },
            beforeAvatarUpload(file) {
                const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isRightType) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isRightType && isLt2M;
            },
            async doSaveSpsb(){ 
                try{
                    this.$refs['editForm'].validate( async (valid) => {
                        if (valid) {
                            const res = await saveSpsb(this.selectTable)
                            if (res.Status == 0) {
                                this.dialogFormVisible = false;
                                this.$message({
                                    type: 'success',
                                    message: '保存商品商标成功'
                                });
                                this.doGetSpsbLists();
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: res.msg
                                });
                            }
                        }else{
                            console.log('error submit!!');
                            return;
                        }  
                    });      
                }catch(err){
                    console.log('保存商品商标失败', err);
                }
            },
            doDeleteSpsb(id,index) {
                var idList = []
                idList[0] = id     
                console.log('idList:',idList)      
                this.$confirm('此操作将删除该商品商标, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async() => {
                        const res = await deleteSpsb(idList);
                        if (res.Status == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除商品商标成功'
                            });
                            this.tableData.splice(index, 1);
                        }else{
                            this.$message({
                                type: 'error',
                                message: res.msg
                            }); 
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '取消删除'
                    });          
                });
            },                 
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .table_container{
        padding: 10px 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
    .demo-input-suffix {
        margin-bottom: 15px;
    }
    .demo-input.demo-zh-CN .el-input {
        width: 180px;
    }
    
    .demo-input-suffix .el-input {
        margin-right: 15px;
        width:auto
    }


</style>
